<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>我的</title>
		<meta http-equiv="x-dns-prefetch-control" content="on">
		<link rel="dns-prefetch" href="http://pic.c-ctrip.com">
		<link rel="dns-prefetch" href="http://res.m.ctrip.com">
		<link rel="dns-prefetch" href="http://images4.c-ctrip.com">
		<link rel="dns-prefetch" href="http://webresource.c-ctrip.com">
		<link rel="dns-prefetch" href="http://webapi.amap.com">
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../mui/css/mui.picker.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<style>
			.mui-content {
				padding-top: 6.4rem;
			}
			
			.mui-table-view-cell {
				font-size: 1.6rem;
				color: #333;
				padding: 1.5rem 1.2rem;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				background: transparent;
			}
			
			.mui-switch.mui-active {
				background-color: #E61874;
				border-color: #E61874;
			}
			.mui-switch:before {
				top: 0.8rem;
			}
			
			.mui-switch.mui-active {
				background-color: #E61874;
				border-color: #E61874;
			}
			
			.mui-content-padded {
				margin: 1.5rem 1.2rem;
			}
			
			.mui-content-padded p {
				font-size: 1.2rem;
				color: #999;
			}
			
			.mui-badge {
				font-size: 1.4rem;
				color: #999;
				background: transparent;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">设置</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<span>接收推送消息</span>
					<div class="mui-switch mui-active">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
			</ul>
			<div class="mui-content-padded">
				<p>开启后，可以接收服务、精选、促销和特价等信息</p>
			</div>
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell">
					清除缓存
					<span class="mui-badge">3.45M</span>
				</li>
			</ul>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui('.mui-content .mui-switch').each(function() { //循环所有toggle
				//				this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false');
				/**
				 * toggle 事件监听
				 */
				this.addEventListener('toggle', function(event) {
					//event.detail.isActive 可直接获取当前状态
					this.parentNode.querySelector('span').innerText = '状态：' + (event.detail.isActive ? 'true' : 'false');
				});
			});
		</script>
	</body>

</html>